/* eslint-disable react/jsx-pascal-case */
import React, { Component, Fragment } from 'react'
import Header from '../components/blog/BlogHeader'
import ArticleShow from '../components/blog/ArticleShow'

import Pagination_container from '../../../../containers/Pagination_container.jsx'
import LayoutContent_container from '../../../../containers/LayoutContent_container'
import store from '../../../../redux/store'
import { Provider } from 'react-redux'
import { _getArticleDetail } from '../components/common/Api'

export default class blogPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            screenWidth: window.innerWidth,
            article: [],
            page: 1
        }
    }

    // 事件监听，如果屏幕大小改变，立即改变screenWidth，并且触发媒体查询
    componentWillMount() {
        window.addEventListener('resize', function (e) {
            const screenWidth = e.target.innerWidth;
            this.setState({
                screenWidth: screenWidth,
            })
        }.bind(this));
    }

    // 判断显示文章列表还是具体文章
    judgeArticle = (articleID) => {
        if (articleID === "undefined") {
            return (
                <Provider store={store}>
                    <LayoutContent_container />
                </Provider>
            )
        } else {
            var articleObj;
            
            this.getAricleDetail(parseInt(articleID))

            return <ArticleShow article={articleObj} />
        }
    }

    // 获取文章详细信息接口
    async getAricleDetail(articleID) {
        const res = await _getArticleDetail({
            articleID
        });

        console.log(res);

        // if (res.data.code === 0) {
        //     // 向redux传递用户信息
        //     this.props.transform_user(res.data.data)

        //     // 使用cookie存放token
        //     cookies.save('Authorization', res.data.data.token)

        //     // 提示成功信息
        //     success();

        //     // 跳转到首页
        //     this.props.history.push("/home");
        // } else {
        //     error('用户名或密码错误');
        // }
    }

    // 判断是否显示分页器
    judgeShowPagination = (articleID) => {
        if (articleID === "undefined") {
            return (
                <Provider store={store}>
                    <Pagination_container />
                </Provider>
            )
        }
    }

    render() {
        const articleID = this.props.match.params.articleID;
        return (
            <Fragment>
                <div style={{
                    position: 'relative',
                    zIndex: 99
                }}>
                    <Header activeIndex={1} />
                    <div style={{
                        margin: '0 10%',
                        marginTop: 20
                    }}>
                        {
                            this.judgeArticle(articleID)
                        }
                    </div>
                    {
                        this.judgeShowPagination(articleID)
                    }
                    <div style={{
                        height: 40
                    }}></div>
                </div>
                <div style={{
                    backgroundColor: '#eee',
                    backgroundSize: 'cover',
                    position: 'fixed',
                    top: 0,
                    bottom: 0,
                    width: '100%',
                    height: '100%'
                }}>
                </div>
            </Fragment>
        )
    }
}